<template>
  <el-card>

    <div slot="header" class="clearfix">
      <span>总数据</span>
    </div>

    <el-row class="mb15 bottom-line" :gutter="40" >
      <el-col :span="12">
        <!--图表一-->
        <incomeChart :view-value="TaoMpInfo" :mp_type="mp_type"/>
      </el-col>
      <el-col :span="12">
        <!--图表一-->
        <fansChart :view-value="TaoMpInfo" :mp_type="mp_type"/>
      </el-col>
    </el-row>

    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>
    <v-tableBtns
      :table-title="exportTitle"
      :table-data="exportData"
      :on-export="handleExport"
      :show-upload="true"
      :uploadUrl="uploadUrl"
      title="每日明细"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      btn-class="btn"
      :deletable="false"
      width="60px"
      @sortChange="sortChange"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :scroll-to="false"
      :get-table-list="getTableList"
    />
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'
  import incomeChart from './charts/income_chart'
  import fansChart from './charts/fans_chart'

  export default {
    name: 'Home',
    components: {
      incomeChart,
      fansChart,
    },
    props:{
      mp_type:{
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        uploadUrl: process.env.BASE_API + 'action/TaoMpDailyDetail/saveFile',
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        TaoMpInfo:[
          {
            label: '全部',
            value: ''
          },
          {
            label: '微赞',
            value: '微赞'
          },
          {
            label: '乾丰',
            value: '乾丰'
          },
        ],
        // 排序
        sidx: 'date',
        sortKey: null,
        formTitle: [
          {
            cn: '时间: ',
            en: 'created_at',
            type: 'time'
          },
          {
            cn: '公众号: ',
            en: 'mp_name'
          },
          {
            cn: '系统: ',
            en: 'system_name'
          },
          {
            cn: '投放公司: ',
            en: 'launch_corp'
          },
          {
            cn: '投放渠道: ',
            en: 'launch_chnl'
          }
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: '日期',
            en: 'date',
            sortable: true
          },
          {
            cn: '公众号',
            en: 'mp_name',
            sortable: true
          },
          {
            cn: '消耗',
            en: 'cost',
            sortable: true
          },
          {
            cn: '收益',
            en: 'earning',
            sortable: true
          },
          {
            cn: '拼多多',
            en: 'pdd_earning',
          },
          {
            cn: '淘宝',
            en: 'taobao_earning',
          },
          {
            cn: '其他收益',
            en: 'other_income',
          },
          {
            cn: '累计粉丝',
            en: 'fans_count',
            sortable: true
          },
          {
            cn: '净增粉丝',
            en: 'net_increase_fans',
            sortable: true
          },
          {
            cn: '负责人',
            en: 'operater'
          },
          {
            cn: '系统',
            en: 'use_system'
          },
          {
            cn: '投放渠道',
            en: 'launch_channel'
          },
          {
            cn: '单粉成本',
            en: 'per_fan_cost'
          },
          {
            cn: '单粉收益',
            en: 'per_fan_earning'
          }
        ],
        tableData: [],
        exportTitle: [
          {
            cn: 'id',
            en: 'id',
            sortable: true
          },
          {
            cn: '时间',
            en: 'date',
            sortable: true
          },
          {
            cn: '公众号',
            en: 'mp_name',
            sortable: true
          },
          {
            cn: '消耗',
            en: 'cost',
            sortable: true
          },
          {
            cn: '收益',
            en: 'earning',
            sortable: true
          },
          {
            cn: '拼多多',
            en: 'pdd_earning',
          },
          {
            cn: '淘宝',
            en: 'taobao_earning',
          },
          {
            cn: '其他收益',
            en: 'other_income',
          },
          {
            cn: '负责人',
            en: 'operater'
          },
          {
            cn: '系统',
            en: 'use_system'
          },
          {
            cn: '投放公司',
            en: 'launch_corp'
          },
          {
            cn: '投放渠道',
            en: 'launch_channel'
          }
        ],
        exportData: []

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.begin_date = origin[key][0]
            data.end_date = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        data.mp_type = this.mp_type
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    mounted(){
      this.getFormValue()
    },
    methods: {
      getTableList() {
        const loading = this.$loading()
        let datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey
        }
        this.$get('action/TaoMpDailyDetail/dataGrid', datas)
          .then(res => {
            let list = []
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.per_fan_earning = item.per_fan_earning ? item.per_fan_earning.toFixed(4) : 0
                item.per_fan_cost = item.per_fan_cost ? item.per_fan_cost.toFixed(4) : 0
                item.other_income = (item.earning||0) - (item.pdd_earning||0) - (item.taobao_earning||0)
                return item
              })

            }
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow

            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },
      // 获取员工列表
      getFormValue() {
        this.$get('action/TaoMpInfo/formValue')
          .then(res => {
            const TaoMpInfo = []
            res.data.TaoMpInfo.forEach(item => {
              TaoMpInfo.push({
                label: item.mp_name,
                value: item.mp_name
              })
            })
            this.TaoMpInfo = this.TaoMpInfo.concat(TaoMpInfo)
          })
          .catch(_ => console.log(1))
      },
      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.getTableList()
      },
      edit(val) {
        console.log(encodeURI(val.row))
        this.$router.push({
          name: 'taobao.daily_detail.edit',
          query: {
            id: val.row.id,
            details: JSON.stringify(val.row)
          }
        })
      },
      handleExport() {
        this.$get('action/TaoMpDailyDetail/GetFile', { sidx: 'id', ...this.filter_infos })
          .then(res => {
            let datas = res.data
            let list = datas.map((item) => {
              const obj = item
              obj.other_income = (item.earning||0) - (item.pdd_earning||0) - (item.taobao_earning||0)
              return obj
            })
            this.exportData = list || []

          }).catch(_ => {
          this.$message({
            message: '导出超时',
            type: 'error'
          })
          this.exportData = []

        })
      },

      // 排序
      sortChange({ column, prop, order }) {
        console.log(column, prop, order)
        this.sidx = prop || 'date'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.pageInfo = {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        }
        this.getTableList()
      }

    }
  }
</script>
